<template>
	<view class="money-toggle">
		<view class="title">
			<!-- 可用红包 释放钱包 购物钱包 -->
			<view class="content">
				<view class="biaoti">
					<view v-for="(a,y) in biao" :index="y" :key="y" :class="{'selected' : y == selected}" @click="select(y)"><text>{{a}}</text><image src="../../static/custom/money.png" mode="" :class="{'blockit' : y == selected}" class="showit" @click="biz(y)"></image></view>
				</view>
				<view class="sbox">
					
					<!-- 轮播数据 -->
				<swiper :current="selected" @change="current" class="swiper2">
					
					<swiper-item>
					<!-- <money-sortsD></money-sortsD> -->
						<view class="swiper-item">
							<scroll-view scroll-y="true">
								<money-date v-for="(a,b) in cxs" :key="b" :list='a'></money-date>
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true" >
						<money-date v-for="(a,b) in cxs" :key="b" :list='a'></money-date>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true" >
						<money-date v-for="(a,b) in cxs" :key="b" :list='a'></money-date>
						</scroll-view>
					</swiper-item>
					<swiper-item>
						<scroll-view scroll-y="true" >
						<money-date v-for="(a,b) in cxs" :key="b" :list='a'></money-date>
						</scroll-view>
					</swiper-item>
				</swiper>
				</view>
			</view>
		</view>
		<!-- 选择币种 -->
		<view class="box1" v-show="bizhong">
			<view class="bizhong">
				{{$t('money.sortsD.Currency')}}
			</view>
			<view v-for="(a,b) in itc" :key="b" @click="currentD(a.type)" class="box2">
			<image :src="a.img" mode="" class="itc"></image ><text class="itcType">{{a.type}}</text>
			</view>
		</view>
		
		<view class="box12" v-show="bizhong1">
			<view class="bizhong">
				{{$t('money.sortsD.Currency')}}
			</view>
			<view v-for="(a,b) in itc" :key="b" @click="currentD(a.type)" class="box2">
			<image :src="a.img" mode="" class="itc"></image ><text class="itcType">{{a.type}}</text>
			</view>
		</view>
		<view class="box13" v-show="bizhong2">
			<view class="bizhong">
				{{$t('money.sortsD.Currency')}}
			</view>
			<view v-for="(a,b) in itc" :key="b" @click="currentD(a.type)" class="box2">
			<image :src="a.img" mode="" class="itc"></image ><text class="itcType">{{a.type}}</text>
			</view>
		</view>
		<view class="box14" v-show="bizhong3">
			<view class="bizhong">
				{{$t('money.sortsD.Currency')}}
			</view>
			<view v-for="(a,b) in itc" :key="b" @click="currentD(a.type)" class="box2">
			<image :src="a.img" mode="" class="itc"></image ><text class="itcType">{{a.type}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import mList from '../money-date/money-date.vue'
	import sorts from '../money-sortsD/money-sortsD.vue'
	import api from '../../common/api.js'
	export default {
		components: {
			mList,
			sorts
		},
		data() {
			return {
				// biao: ['收益记录', '消费收益', '充值记录', '提现记录'],
				selected: '0',
				bizhong:false,
				bizhong1:false,
				bizhong2:false,
				bizhong3:false,
				cxs: [{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '20.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.13',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.33',
						date: '2021-11-06',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '26.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '29.33',
						date: '2021-11-09',
						time: '12:00'
					},
					{
						img: '../../static/computingPower/area.png',
						BZ: 'BTC',
						use: '21.33',
						date: '2021-11-09',
						time: '12:00'
					},
				],
				itc:[
					{
						img:'../../static/custom/money.png',
						type:'ADC'
					},
					{
						img:'../../static/custom/money.png',
						type:'ADC'
					},
					{
						img:'../../static/custom/money.png',
						type:'ADC'
					},
					{
						img:'../../static/custom/money.png',
						type:'ADC'
					},
				]
			}
		},
		
			computed:{
				biao(){
				return [
					this.$t('money.toggle.revenue'),
					this.$t('money.toggle.purchase'),
					this.$t('money.toggle.recharge'),
					this.$t('money.toggle.withdrawal')
				]
				},
			},
		methods: {
			select(x) {
				this.selected = x
				
			},
			current(e) {
				this.selected = e.detail.current
			},
			biz(e){
				if(e==0){
					this.bizhong=!this.bizhong
				}else if(e==1){
					this.bizhong1=!this.bizhong1
				}else if(e==2){
					this.bizhong2=!this.bizhong2
				}else if(e==3){
					this.bizhong3=!this.bizhong3
				}
				
			},
			currentD(e){
				// 当前类型
				console.log(e);
				if(e){
					this.bizhong=false;
					this.bizhong1=false;
					this.bizhong2=false;
					this.bizhong3=false;
				}
			}
		},
		created() {
			this.$api.sendRequest({
				url: api.MONEY_get,
				data:{
					user_id:1,
					page:1
				},
				success: res => {
				}
			});
			
		}
	}
</script>

<style scoped>
	
	.content {
		box-shadow: 0 0 6rpx 6rpx rgba(0, 0, 0, .06);
		margin-top: -80rpx;
	}
	.sbox{
		z-index: -99;
	}
	
	swiper{
		height: 59vh;
		margin: 0;
	}
	scroll-view{
		height: 59vh;
	}
	.title {
		width: 96%;
		margin: auto;
	}

	.biaoti {
		display: flex;
		height: 72rpx;
		justify-content: space-around;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		font-weight: bold;
		border-bottom: 2rpx solid #8F8F94;
		opacity: .8;
	}

	.biaoti>view>text {
		margin-bottom: 20rpx;
		position: relative;
		top: 20rpx;
	}
	.biaoti>view:nth-of-type(4){
		position: relative;
		left: -20rpx;
	}
	.selected {
		border-bottom: 6rpx solid #005FDB;
		font-weight: 800;
		font-size: .96em;
		border-radius: 4rpx;
		color: #000000;
		opacity: 1;
		position: relative;
	}
	.showit{
		width: 20rpx;
		height: 20rpx;
		display: none;
		position: absolute;
		right: -24rpx;
		top: 32rpx;
	}
	.blockit{
		display: block;
	}
	.box1{
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 180rpx;
		position:absolute;
		top: 440rpx;
		left: 200rpx;
		background-color: #F3F3F3;
		box-shadow: 0px 10rpx 60rpx rgba(0, 0, 0,.01);
	}
	.box12{
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 180rpx;
		position:absolute;
		top: 440rpx;
		left: 380rpx;
		background-color: #F3F3F3;
		box-shadow: 0px 10rpx 60rpx rgba(0, 0, 0,.01);
	}
	.box13{
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 180rpx;
		position:absolute;
		top: 440rpx;
		left: 540rpx;
		background-color: #F3F3F3;
		box-shadow: 0px 10rpx 60rpx rgba(0, 0, 0,.01);
	}
	.box14{
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 180rpx;
		position:absolute;
		top: 440rpx;
		left: 360rpx;
		background-color: #F3F3F3;
		box-shadow: 0px 10rpx 60rpx rgba(0, 0, 0,.01);
	}
	.box2{
		width: 180rpx;
		border: .6rpx solid #C7C7C7;
		/* opacity: .7; */
		 z-index: 99;
	}
	
	.bizhong{
		/* margin: 10px 0; */
	}
	.itc{
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.itcType{
		position: relative;
		top: -20rpx;
		 left: 0px;
	}
	.bc{
		background-color: #F3F3F3;
	}
</style>
